{extend name="common:base" /}

{block name="main"}
<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">用户列表</strong> / <small>Users List</small></div>
    </div>

    <hr>

    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-form-group">
                <select name="filter" data-am-selected="{btnSize: 'sm'}">
                    <option value="all">显示所有用户</option>
                    <option value="2">身份已验证</option>
                    <option value="1">身份未验证</option>
                    <option value="0">已删除</option>
                    <option value="-1">禁止登陆</option>
                </select>
            </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-form-group">
                <select name="sort" data-am-selected="{btnSize: 'sm'}">
                    <option value="user_id">按UID排序</option>
                    <option value="last_login">按上次登陆时间</option>
                    <option value="username">按用户名</option>
                    <option value="email">按邮箱</option>
                </select>
            </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-input-group am-input-group-sm">
                <input type="text" class="am-form-field" id="ser_input" onkeydown="EnterPress()">
                <span class="am-input-group-btn">
                <button id="ser_button" class="am-btn am-btn-default" type="button">搜索</button>
            </span>
            </div>
        </div>
    </div>

    <div class="am-g">
        <div class="am-u-sm-12">
            <form class="am-form">
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                    <tr>
                        <th class="table-id">UID</th>
                        <th class="table-title">用户名</th>
                        <th class="table-title">邮箱</th>
                        <th class="table-type">状态</th>
                        <th class="table-date am-hide-sm-only">上次登陆时间</th>
                        <th class="table-set">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {volist name="list" id="vo"}
                    <tr data-id="{$vo.user_id}">
                        <td>{$vo.user_id}</td>
                        <td><a href="{:url('admin/users/detail',['user_id'=>$vo.user_id])}"><!-- TODO: weiai525 链接到用户详情页面 -->{$vo.user_id|get_username}</a></td>
                        <td>{$vo.email}</td>
                        <td>{$vo.status}</td>
                        <td class="am-hide-sm-only">
                        {if condition="$vo.last_login_time > 0"}
                            {$vo.last_login_time|get_time_diff=time(),###}前
                        {else/}
                            -
                        {/if}
                        </td>
                        <td>
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                        {if $vo.status == "身份未验证"}
                                            <button class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="through({$vo.user_id})" type="button"><span class="am-icon-pencil-square-o"></span>
                                            通过验证
                                            </button>
                                        {else/}
                                            <button class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="through({$vo.user_id})" disabled="disabled" type="button"><span class="am-icon-pencil-square-o"></span>
                                            无法操作
                                            </button>
                                        {/if}

                                        {if $vo.status == "禁止登陆"}
                                            <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only" onclick="nothrough({$vo.user_id})" type="button"><span class="am-icon-pencil-square-o"></span>
                                            允许登陆
                                            </button>
                                        {elseif ($vo.status == "身份未验证" || $vo.status == "已验证")/}
                                            <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only" onclick="nothrough({$vo.user_id})" type="button"><span class="am-icon-pencil-square-o"></span>
                                            禁止登陆
                                            </button>
                                        {else/}
                                            <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only" onclick="nothrough({$vo.user_id})" disabled="disabled" type="button"><span class="am-icon-pencil-square-o"></span>
                                            无法操作
                                            </button>
                                        {/if}
                                    <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only" onclick="recycle({$vo.user_id})" type="button">
                                        <span class="am-icon-trash-o"></span>
                                        {if $vo.status == "用户被删除"}
                                            取消删除
                                        {else/}
                                            删除
                                        {/if}
                                    </button>
                                    <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only edituserrole-prompt-show"  type="button">
                                        <span class="am-icon-trash-o"></span>
                                        设置角色
                                    </button>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {/volist}
                    </tbody>
                </table>
                <div class="am-cf">
                    {$list->render()}
                </div>
            </form>
        </div>

    </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="edituserrole-prompt">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">编辑权限</div>
        <div class="am-modal-bd">
            <form class="am-form" id="form-edituserrole">
                <input type="text" class="hide" name="user_id" style="display: none">
                <div class="am-form-group" id="check-rule-list">
                 
                </div>

            </form>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" id="btn-editrole-prompt" data-am-modal-confirm>提交</span>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script type="text/javascript">
$('select[name="sort"]').find('option[value="{:input('param.sort', '')}"]').attr('selected', true);
$('select[name="filter"]').find('option[value="{:input('param.filter', '')}"]').attr('selected', true);
if (!$.AMUI.support.mutationobserver) {
    $selected.trigger('changed.selected.amui');
}
$('select[name="sort"]').on('change', function(event) {
    var el = $(this);
    location.href = "{:url('admin/users/list')}/sort/"+ el.val();
});
$('select[name="filter"]').on('change', function(event) {
    var el = $(this);
    location.href = "{:url('admin/users/list')}/filter/"+ el.val();
});
function through(user_id) {
    $.get("{:url('admin/users/through')}?user_id=" + user_id, function(result) {
        if (result == true) {
            alert("修改成功！");
            location.reload(true);
        }
        else
            alert("修改失败！");
    });
}
function nothrough(user_id) {
    $.get("{:url('admin/users/nothrough')}?user_id=" + user_id, function(result) {
        if (result == true) {
            alert("修改成功！");
            location.reload(true);
        }
        else
            alert("修改失败！");
    });
}
function recycle(user_id) {
    $.get("{:url('admin/users/recycle')}?user_id=" + user_id, function(result) {
        if (result == true) {
            alert("修改成功！");
            location.reload(true);
        }
        else
            alert("修改失败！");
    });
}
function EnterPress() { //传入 event
    var e = window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode == 13 ) {
        var name = $('#ser_input').val();
        location.href = "{:url('admin/users/list')}/username/"+ name;
    }
}
$('#ser_button').on('click', function() {
    var name = $('#ser_input').val();
    location.href = "{:url('admin/users/list')}/username/"+ name;
});
//ajax请求角色，并显示在model页面
function getRoleList(user_id) {
    $.ajax({
        url: "{:url('admin/rbac/getRoleList')}",
        type: 'POST',
        data: '',
        success: function(data) {
                var str = '';
            for(var k=0; k < data.length; k++){
                if (data[k]['status'] == 0) {
                    break;
                }
                str += ' <label class="am-checkbox-inline">';
                str += '  <input type="checkbox" name="role_id[]" value="';
                str += data[k]['role_id'];
                str += '">';
                str += data[k]['name'];
                str += ' </label>';
            }
            $('#check-rule-list').empty();
            $('#check-rule-list').append(str);
            getUserRole(user_id)
        },
        error:function(){
            $alert = $('#am-alert');
            $alert.find('.content').text('系统出错啦');
            $alert.modal('open');
        }
    })
}
//获取角色已获得的权限，并在权限列表中勾选出来
function getUserRole(user_id)
{
    $.ajax({
        url: "{:url('admin/rbac/getUserRole')}?user_id="+user_id,
        type: 'get',
        data: '',
        success: function(data) {
            for(var k=0; k < data.length; k++){
                $('#check-rule-list').find('input[value='+data[k]['role_id']+']').prop('checked', true);
            }
        },
        error:function(){
            $alert = $('#am-alert');
            $alert.find('.content').text('系统出错啦');
            $alert.modal('open');
        }
    })
}
$('.edituserrole-prompt-show').on('click', function() {
        var tr = $(this).parents('tr');
       $('#form-edituserrole').find('input[name=user_id]').val(tr.data('id'));
        getRoleList(tr.data('id'))

        $('#edituserrole-prompt').modal({
            relatedTarget: this,
            onConfirm: function(e) {
                var data = $('#form-edituserrole').serialize();
                    //如果什么都不选,js传入空数组后台识别为没有传入该变量，因此添加一个空字符串到数组到表空数组
                if (data.indexOf('role_id') < 0) {
                    data += '&role_id[]';
                }
                console.log(data);
                $.ajax({
                    url: "{:url('admin/rbac/editUserRole')}",
                    type: 'POST',
                    data: data,
                    success: function(data) {
                        if(data.code) {
                            location.reload();
                        } else {
                            $alert = $('#am-alert');
                            $alert.find('.content').text(data.msg);
                            $alert.modal('open');
                        }
                    },
                    error:function(){
                        $alert = $('#am-alert');
                        $alert.find('.content').text('系统出错啦');
                        $alert.modal('open');
                    }
                })
            }
        });
    });
</script>
{/block}
